window.onload = function () {
  // 加载link标签
  function addLink(href) {
    let linkNode = document.createElement("link");
    linkNode.setAttribute("rel", "stylesheet");
    linkNode.setAttribute("href", href);
    document.head.appendChild(linkNode);
  }
  addLink("https://unpkg.com/swiper/swiper-bundle.min.css")

  // 加载script标签
  // function addScript(src) {
  //   let scriptNode = document.createElement("script");
  //   scriptNode.setAttribute("type", "text/javascript");
  //   scriptNode.setAttribute("src", src);
  //   document.body.appendChild(scriptNode);
  // }
  // addScript("https://unpkg.com/swiper/swiper-bundle.min.js")

  // 获取图片数据
  function getData() {  
    let res=[]
    $.ajax({
      url: "https://api.xiaohucloud.com/api/data/photoListPageByCategoryIds",
      data: {
          ids: 935,
          limit: 999,
          token: 'ab90dc24b3974ef1a94c0d41968787b5Pp1T0t',
          lang: 'cn',
          type: 1,
          versionId: 2771,
          version_id: 2771,
          companyId: 100496
      },
      async:false, // 设置为同步任务
      type: "GET",
      dataType: "json",
      success: function (data) {
          // console.log(data);
          res=data.data.list
          // console.log(res);
      }
    })
    return res
  }
  let rdata=getData()
  console.log(rdata);
  // 循环数据
  for (i = 0; i < rdata.length; i++) {
    let str=`<div class="swiper-slide" 
    style="background-image:url(${rdata[i].image})" 
    data-index="${i+1}"></div>`
    console.log(i);
    
    $('.gallery-top .swiper-wrapper').append(str)

    $('.gallery-thumbs .swiper-wrapper').append(str)
  }

  let count = 1 // 计数器
  let smallWid = 327 // 小图宽度
  let bigWid = 1200 //大图宽度
  let flag = true //节流阀

  // 获取图片个数
  let len = $('.bottom .swiper-wrapper .swiper-slide').length
  // console.log(len);

  // wrapper左侧偏移最大距离
  let leftMax = smallWid * (len - 3)
  // console.log(leftMax);

  // 点下一页按钮
  $('.swiper-button-next').on('click', function () {
    if (flag) {
      flag = false
      // console.log('next');
      // 获取小图wrapper向左偏移的距离
      let left = $('.bottom .swiper-wrapper').css('margin-left')
      let leftwid = parseInt(left)
      console.log('左侧偏移:' + leftwid);
      if (leftwid > (-leftMax)) {
        // 小图偏移
        $('.bottom .swiper-wrapper').css({
          'margin-left': `-${count * smallWid}px`
        })

        // 大图偏移
        // $('.gallery-top .swiper-wrapper').css({
        //   'margin-left': `-${count * bigWid}px`
        // })
        count++
        console.log('count:' + count);
      }
      // 设置点击间隔
      setTimeout(function () {
        flag = true
      }, 500)
    }

  })


  // 点上一页按钮
  $('.swiper-button-prev').on('click', function () {
    if (flag) {
      flag=false
      // console.log('prev');
      // 获取小图wrapper向左偏移的距离
      let left = $('.bottom .swiper-wrapper').css('margin-left')
      let leftwid = parseInt(left)
      console.log('左侧偏移:' + leftwid);


      // 获取大图wrapper向左偏移的距离
      let leftBig = $('.gallery-top .swiper-wrapper').css('margin-left')
      let leftwidBig = parseInt(leftBig)
      console.log('左侧偏移:' + leftwidBig);

      if (leftwid < 0) {
        $('.bottom .swiper-wrapper').css({
          'margin-left': `${leftwid + smallWid}px`
        })

        // 大图偏移
        // $('.gallery-top .swiper-wrapper').css({
        //   'margin-left': `${leftwidBig + bigWid}px`
        // })

        count--
        console.log('count:' + count);
      }
      // 设置点击间隔
      setTimeout(function () {
        flag = true
      }, 500)
    }

  })

  // 清除所有current类
  function clearCur() {  
    $('.bottom .swiper-slide').removeClass('current')
  }
  // 点击小图
  $('.bottom .swiper-slide').on('click',function () { 
    clearCur() 
    $(this).addClass('current') //增加current类
    // 获取点击的图片的索引
    // console.log($(this).attr('data-index'));
    let sIndex=$(this).attr('data-index')-1
    console.log(sIndex);
    // let select=$('.gallery-top .swiper-slide').eq(sIndex-1)
    // console.log(select);
    // 偏移大图
    $('.gallery-top .swiper-wrapper').css({
      'margin-left': `-${bigWid*sIndex}px`
    })
  })


}